<template>
	<div class="ding">
		<div class="danH">
			<span @click="$router.push('/layout/my')">
				<svg-icon iconClass="back"></svg-icon>
			</span>
			<span class="stex">订单中心</span>
			<span class="ggg">管理</span>
		</div>
		<main>
			<van-tabs @click="dataUp">
				<van-tab v-for="index in 6" :title="arr[index]" :key="index">
					<van-notice-bar mode="closeable">{{
						textList[index]
					}}</van-notice-bar>
					<van-card
						v-for="item in list"
						:key="item.id"
						class="tabsV"
						num="1"
						:price="item.price2 + '.' + '00'"
						:desc="item.id"
						:title="item.text"
						:thumb="imgs[item.flag]"
						:origin-price="item.price"
					>
						<template #footer>
							<van-button size="mini" @click="handDel(item)"
								>取消订单</van-button
							>
							<van-button size="mini" @click="handMap">查看物流</van-button>
							<van-button size="mini" @click="handGo(item)" id="fire">{{
								arr[index] === "全部" ? "确认付款" : arr[index]
							}}</van-button>
						</template>
					</van-card>
				</van-tab>
			</van-tabs>
			<van-loading
				size="24px"
				vertical
				text-color="#0094ff"
				color="#0094ff"
				v-if="flag"
				>加载中...</van-loading
			>
		</main>
	</div>
</template>

<script>
import axios from "axios";
import { Dialog } from "vant";
export default {
	components: {
		[Dialog.Component.name]: Dialog.Component,
	},
	data() {
		return {
			flag: false,
			imgs: [
				"",
				"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=448731570,1890178199&fm=26&gp=0.jpg",
				"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3135215632,750931275&fm=26&gp=0.jpg",
				"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=4111370010,3233408778&fm=11&gp=0.jpg",
				"https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3945228470,511403872&fm=11&gp=0.jpg",
			],
			arr: ["", "全部", "待付款", "待发货", "待收货", "待评价", "售后"],
			list: [],
			textList: [
				"",
				"   你的全部订单",
				"   你还未付款",
				"   你还未发货",
				"   你还未收货",
				"   你还未评价",
				"   亲亲,你有什么意见吗？",
			],
		};
	},
	created() {
		axios.get("/api/card").then((res) => {
			this.list = res.card;
		});
	},
	methods: {
		handGo(item) {
			this.flag = true;
			Dialog.confirm({
				title: "购买订单",
				message: `赶紧把宝贝带回家吧！`,
			})
				.then(() => {
					setTimeout(() => {
						this.$router.push({ path: "/orderDetail", query: { item } });
						this.flag = false;
					}, 2000);
				})
				.catch(() => {});
		},
		handDel(val) {
			Dialog.confirm({
				title: "取消订单",
				message: `真的不要了吗...`,
			})
				.then(() => {
					this.flag = true;
					setTimeout(() => {
						let newList = this.list.filter((item) => item.id !== val.id);
						this.list = newList;
						this.flag = false;
					}, 2000);
				})
				.catch(() => {});
		},
		handMap() {
			this.flag = true;
			setTimeout(() => {
				this.$router.push("/orderArea");
				this.flag = false;
			}, 2000);
		},

		dataUp() {
			axios.get("/api/card").then((res) => {
				console.log(res);
			});
		},
	},
};
</script>

 <style lang='scss'>
@import "../../assets/css/style";
.ggg {
	font-size: px2rem(5);
}
.danH {
	font-size: $titleSize;
	background: none;
	display: flex;
	height: px2rem(50);
	line-height: px2rem(50);
	justify-content: space-between;
	background: #fff;
	padding: 0 px2rem(15);
}
.stex {
	font-weight: bold;
}
.van-tabs__line {
	background-color: #f90;
}
.tabsV {
	margin-top: px2rem(10); //20px
}

.tabsV /deep/ .van-card__desc {
	max-height: 20px;
	line-height: 30px;
	color: #ff0000;
	margin-top: px2rem(4);
	margin-top: px2rem(2);
}
.tabsV /deep/ .van-card__price-integer {
	font-weight: bold;
}
.tabsV /deep/.van-card__title {
	max-height: 32px;
	font-weight: 1000;
	line-height: 16px;
	font-size: px2rem(7.5);
}
.tabsV /deep/.van-button__content {
	background: #fff;
	border-radius: px2rem(5);
	padding: px2rem(2) px2rem(4);
	color: #000;
	border: 1px solid #bbb;
}
.tabsV /deep/.van-button--default {
	color: #323233;
	background-color: #fff;
	border: 1px solid #fff;
}
.van-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
</style>